<template>
    <div class="pang">
        <div class="jiangpin" :style="{transition,transform}"></div>
        <div class="waiquan"></div>
        <div class="cjbtn" @click="selectZhuan()"></div>
    </div>
</template>

<script>
export default {
    name:'pang',
    data(){
        return{
            transition:'',
            transform:'',
            name:'',
            mobile:''
        }
    },
    methods:{
        selectZhuan(){
            if(this.name==''&&this.mobile==''){
                this.center.$emit('showLiuzi',true)
                return;
            }
            let num = 1;
            if(num == 0){
                layer.open({content: '您已抽过奖',btn: '关闭'});
            }else if(num == 1){
                this.zhuan(202.5,'谢谢参与',num);//谢谢参与
            }else if(num == 2){
                this.zhuan(67.5,'恭喜获得50元话费',num);//50元话费
            }else if(num == 3){
                this.zhuan(22.5,'恭喜获得双肩包',num);//双肩包
            }else if(num == 4){
                this.zhuan(292.5,'恭喜获得移动硬盘',num);//移动硬盘
            }
            // this.$axios.get("/tnexchange.php?_a=getuserinfo")
            // .then((response)=>{
            //     if(response.data.message == '手机号不合法'){
            //         var num = 1;
            //         if(num == 1){
            //             this.zhuan(202.5,'谢谢参与',num);//谢谢参与
            //         }else if(num == 2){
            //             this.zhuan(67.5,'恭喜获得50元话费',num);//50元话费
            //         }else if(num == 3){
            //             this.zhuan(22.5,'恭喜获得双肩包',num);//双肩包
            //         }else if(num == 4){
            //             this.zhuan(292.5,'恭喜获得移动硬盘',num);//移动硬盘
            //         }
            //     }
            // })
            // .catch((error)=>{
            //     console.log(error)
            // })
        },
        zhuan(deg,jp,num){
            deg+=5400;
            this.transition = "transform 6s";
            this.transform = "rotate("+deg+"deg)";
            setTimeout(()=>{
                layer.open({content: jp,btn: '关闭'});
                this.center.$emit('showback',true)
                this.center.$emit('zjtishi',num)
            },6200)
        }
    },
    mounted(){
        this.center.$on('changename',(name)=>{
            this.name = name;
        })
        this.center.$on('changemobile',(mobile)=>{
            this.mobile = mobile;
        })
    }
}
</script>

<style scoped>
.pang{
    width: 76vw;
    height: 76vw;
    position: absolute;
    top: 34.66vw;
    left: 50%;
    margin-left: -37.33vw;
}
.pang>div{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.pang .jiangpin{
    width: 74.2vw;
    height: 74.2vw;
    background: url(../../static/img/pan_jiangpin.png) no-repeat;
    background-size: 74.2vw 74.2vw;
    border-radius: 50%;
}
.pang .waiquan{
    width: 74.66vw;
    height: 76vw;
    background: url(../../static/img/pan_wrap.png) no-repeat;
    background-size: 74.66vw 76vw;
    margin-top: -1.33vw;
}
.pang .cjbtn{
    width: 23.73vw;
    height: 23.73vw;
    background: url(../../static/img/pan_click.png) no-repeat;
    background-size: 23.73vw 23.73vw;
}
</style>
